import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {StatusBar, StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

// 导入组件
import Dashboard from './src/components/Dashboard';
import WeightTracker from './src/components/WeightTracker';
import DietTracker from './src/components/DietTracker';
import ExerciseTracker from './src/components/ExerciseTracker';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <>
      <StatusBar barStyle="light-content" backgroundColor="#667eea" />
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
              let iconName;

              if (route.name === 'Dashboard') {
                iconName = 'dashboard';
              } else if (route.name === 'Weight') {
                iconName = 'monitor-weight';
              } else if (route.name === 'Diet') {
                iconName = 'restaurant';
              } else if (route.name === 'Exercise') {
                iconName = 'fitness-center';
              }

              return <Icon name={iconName} size={size} color={color} />;
            },
            tabBarActiveTintColor: '#667eea',
            tabBarInactiveTintColor: 'gray',
            tabBarStyle: {
              backgroundColor: '#fff',
              borderTopWidth: 1,
              borderTopColor: '#e0e0e0',
              paddingBottom: 5,
              paddingTop: 5,
              height: 60,
            },
            headerStyle: {
              backgroundColor: '#667eea',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
              fontSize: 18,
            },
          })}
        >
          <Tab.Screen
            name="Dashboard"
            component={Dashboard}
            options={{
              title: '总览',
              headerTitle: '减重记录助手',
            }}
          />
          <Tab.Screen
            name="Weight"
            component={WeightTracker}
            options={{
              title: '体重记录',
              headerTitle: '体重记录',
            }}
          />
          <Tab.Screen
            name="Diet"
            component={DietTracker}
            options={{
              title: '饮食记录',
              headerTitle: '饮食记录',
            }}
          />
          <Tab.Screen
            name="Exercise"
            component={ExerciseTracker}
            options={{
              title: '运动记录',
              headerTitle: '运动记录',
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
});

export default App;
